/**
 * 各种画echarts图表的方法都封装在这里
 *
 * 前台:demo:https://www.echartsjs.com/examples/
 *
 * 后台:需要自行从后台取数据显示出来,接口等都自行定义
 *
 */

import $ from 'jquery'

import echarts from 'echarts'
const install = function(Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get() {
        return {
          //画一条简单的线
          line1: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              title: {
                text: '一条简单的线'
              },
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
              }]
            };

            this.chart.setOption(optionData);
          },

          //3D
          threeD: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();



            // this.chart.setOption(optionData);
          },


          //map
          map: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              backgroundColor: '#1b1b1b',
              tooltip : {
                formatter: "{a} <br/>{c} {b}"
              },
              toolbox: {
                show : true,
                feature : {
                  mark : {show: true},
                  restore : {show: true},
                  saveAsImage : {show: true}
                }
              },
              series : [
                {
                  name:'速度',
                  type:'gauge',
                  min:0,
                  max:220,
                  splitNumber:11,
                  radius: '50%',
                  axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                      color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                      width: 3,
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  axisLabel: {            // 坐标轴小标记
                    textStyle: {       // 属性lineStyle控制线条样式
                      fontWeight: 'bolder',
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  axisTick: {            // 坐标轴小标记
                    length :15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                      color: 'auto',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  splitLine: {           // 分隔线
                    length :25,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                      width:3,
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  pointer: {           // 分隔线
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5
                  },
                  title : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                      fontWeight: 'bolder',
                      fontSize: 20,
                      fontStyle: 'italic',
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  detail : {
                    backgroundColor: 'rgba(30,144,255,0.8)',
                    borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5,
                    offsetCenter: [0, '50%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                      fontWeight: 'bolder',
                      color: '#fff'
                    }
                  },
                  data:[{value: 40, name: 'km/h'}]
                },
                {
                  name:'转速',
                  type:'gauge',
                  center : ['25%', '55%'],    // 默认全局居中
                  radius : '30%',
                  min:0,
                  max:7,
                  endAngle:45,
                  splitNumber:7,
                  axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                      color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
                      width: 2,
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  axisLabel: {            // 坐标轴小标记
                    textStyle: {       // 属性lineStyle控制线条样式
                      fontWeight: 'bolder',
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  axisTick: {            // 坐标轴小标记
                    length :12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                      color: 'auto',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  splitLine: {           // 分隔线
                    length :20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                      width:3,
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  pointer: {
                    width:5,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5
                  },
                  title : {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                      fontWeight: 'bolder',
                      fontStyle: 'italic',
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  detail : {
                    //backgroundColor: 'rgba(30,144,255,0.8)',
                    // borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5,
                    width: 80,
                    height:30,
                    offsetCenter: [25, '20%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                      fontWeight: 'bolder',
                      color: '#fff'
                    }
                  },
                  data:[{value: 1.5, name: 'x1000 r/min'}]
                },
                {
                  name:'油表',
                  type:'gauge',
                  center : ['75%', '50%'],    // 默认全局居中
                  radius : '30%',
                  min:0,
                  max:2,
                  startAngle:135,
                  endAngle:45,
                  splitNumber:2,
                  axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                      color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
                      width: 2,
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  axisTick: {            // 坐标轴小标记
                    length :12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                      color: 'auto',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  axisLabel: {
                    textStyle: {       // 属性lineStyle控制线条样式
                      fontWeight: 'bolder',
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    },
                    formatter:function(v){
                      switch (v + '') {
                        case '0' : return 'E';
                        case '1' : return 'Gas';
                        case '2' : return 'F';
                      }
                    }
                  },
                  splitLine: {           // 分隔线
                    length :15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                      width:3,
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  pointer: {
                    width:2,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5
                  },
                  title : {
                    show: false
                  },
                  detail : {
                    show: false
                  },
                  data:[{value: 0.5, name: 'gas'}]
                },
                {
                  name:'水表',
                  type:'gauge',
                  center : ['75%', '50%'],    // 默认全局居中
                  radius : '30%',
                  min:0,
                  max:2,
                  startAngle:315,
                  endAngle:225,
                  splitNumber:2,
                  axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                      color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
                      width: 2,
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  axisTick: {            // 坐标轴小标记
                    show: false
                  },
                  axisLabel: {
                    textStyle: {       // 属性lineStyle控制线条样式
                      fontWeight: 'bolder',
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    },
                    formatter:function(v){
                      switch (v + '') {
                        case '0' : return 'H';
                        case '1' : return 'Water';
                        case '2' : return 'C';
                      }
                    }
                  },
                  splitLine: {           // 分隔线
                    length :15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                      width:3,
                      color: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 10
                    }
                  },
                  pointer: {
                    width:2,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5
                  },
                  title : {
                    show: false
                  },
                  detail : {
                    show: false
                  },
                  data:[{value: 0.5, name: 'gas'}]
                }
              ]
            };

            setInterval(function (){
              optionData.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
              optionData.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
              optionData.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
              optionData.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
              // this.chart.setOption(optionData);
              // this.chart.setOption(optionData);
            },2000)



            this.chart.setOption(optionData);
          },



          //画一条简单的线
          busline: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            // Schema:
            // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
            var dataBJ = [
              [1,55,9,56,0.46,18,6,"良"],
              [2,25,11,21,0.65,34,9,"优"],
              [3,56,7,63,0.3,14,5,"良"],
              [4,33,7,29,0.33,16,6,"优"],
              [5,42,24,44,0.76,40,16,"优"],
              [6,82,58,90,1.77,68,33,"良"],
              [7,74,49,77,1.46,48,27,"良"],
              [8,78,55,80,1.29,59,29,"良"],
              [9,267,216,280,4.8,108,64,"重度污染"],
              [10,185,127,216,2.52,61,27,"中度污染"],
              [11,39,19,38,0.57,31,15,"优"],
              [12,41,11,40,0.43,21,7,"优"],
              [13,64,38,74,1.04,46,22,"良"],
              [14,108,79,120,1.7,75,41,"轻度污染"],
              [15,108,63,116,1.48,44,26,"轻度污染"],
              [16,33,6,29,0.34,13,5,"优"],
              [17,94,66,110,1.54,62,31,"良"],
              [18,186,142,192,3.88,93,79,"中度污染"],
              [19,57,31,54,0.96,32,14,"良"],
              [20,22,8,17,0.48,23,10,"优"],
              [21,39,15,36,0.61,29,13,"优"],
              [22,94,69,114,2.08,73,39,"良"],
              [23,99,73,110,2.43,76,48,"良"],
              [24,31,12,30,0.5,32,16,"优"],
              [25,42,27,43,1,53,22,"优"],
              [26,154,117,157,3.05,92,58,"中度污染"],
              [27,234,185,230,4.09,123,69,"重度污染"],
              [28,160,120,186,2.77,91,50,"中度污染"],
              [29,134,96,165,2.76,83,41,"轻度污染"],
              [30,52,24,60,1.03,50,21,"良"],
              [31,46,5,49,0.28,10,6,"优"]
            ];

            var dataGZ = [
              [1,26,37,27,1.163,27,13,"优"],
              [2,85,62,71,1.195,60,8,"良"],
              [3,78,38,74,1.363,37,7,"良"],
              [4,21,21,36,0.634,40,9,"优"],
              [5,41,42,46,0.915,81,13,"优"],
              [6,56,52,69,1.067,92,16,"良"],
              [7,64,30,28,0.924,51,2,"良"],
              [8,55,48,74,1.236,75,26,"良"],
              [9,76,85,113,1.237,114,27,"良"],
              [10,91,81,104,1.041,56,40,"良"],
              [11,84,39,60,0.964,25,11,"良"],
              [12,64,51,101,0.862,58,23,"良"],
              [13,70,69,120,1.198,65,36,"良"],
              [14,77,105,178,2.549,64,16,"良"],
              [15,109,68,87,0.996,74,29,"轻度污染"],
              [16,73,68,97,0.905,51,34,"良"],
              [17,54,27,47,0.592,53,12,"良"],
              [18,51,61,97,0.811,65,19,"良"],
              [19,91,71,121,1.374,43,18,"良"],
              [20,73,102,182,2.787,44,19,"良"],
              [21,73,50,76,0.717,31,20,"良"],
              [22,84,94,140,2.238,68,18,"良"],
              [23,93,77,104,1.165,53,7,"良"],
              [24,99,130,227,3.97,55,15,"良"],
              [25,146,84,139,1.094,40,17,"轻度污染"],
              [26,113,108,137,1.481,48,15,"轻度污染"],
              [27,81,48,62,1.619,26,3,"良"],
              [28,56,48,68,1.336,37,9,"良"],
              [29,82,92,174,3.29,0,13,"良"],
              [30,106,116,188,3.628,101,16,"轻度污染"],
              [31,118,50,0,1.383,76,11,"轻度污染"]
            ];

            var dataSH = [
              [1,91,45,125,0.82,34,23,"良"],
              [2,65,27,78,0.86,45,29,"良"],
              [3,83,60,84,1.09,73,27,"良"],
              [4,109,81,121,1.28,68,51,"轻度污染"],
              [5,106,77,114,1.07,55,51,"轻度污染"],
              [6,109,81,121,1.28,68,51,"轻度污染"],
              [7,106,77,114,1.07,55,51,"轻度污染"],
              [8,89,65,78,0.86,51,26,"良"],
              [9,53,33,47,0.64,50,17,"良"],
              [10,80,55,80,1.01,75,24,"良"],
              [11,117,81,124,1.03,45,24,"轻度污染"],
              [12,99,71,142,1.1,62,42,"良"],
              [13,95,69,130,1.28,74,50,"良"],
              [14,116,87,131,1.47,84,40,"轻度污染"],
              [15,108,80,121,1.3,85,37,"轻度污染"],
              [16,134,83,167,1.16,57,43,"轻度污染"],
              [17,79,43,107,1.05,59,37,"良"],
              [18,71,46,89,0.86,64,25,"良"],
              [19,97,71,113,1.17,88,31,"良"],
              [20,84,57,91,0.85,55,31,"良"],
              [21,87,63,101,0.9,56,41,"良"],
              [22,104,77,119,1.09,73,48,"轻度污染"],
              [23,87,62,100,1,72,28,"良"],
              [24,168,128,172,1.49,97,56,"中度污染"],
              [25,65,45,51,0.74,39,17,"良"],
              [26,39,24,38,0.61,47,17,"优"],
              [27,39,24,39,0.59,50,19,"优"],
              [28,93,68,96,1.05,79,29,"良"],
              [29,188,143,197,1.66,99,51,"中度污染"],
              [30,174,131,174,1.55,108,50,"中度污染"],
              [31,187,143,201,1.39,89,53,"中度污染"]
            ];

            var schema = [
              {name: 'date', index: 0, text: '日期'},
              {name: 'AQIindex', index: 1, text: 'AQI'},
              {name: 'PM25', index: 2, text: 'PM2.5'},
              {name: 'PM10', index: 3, text: 'PM10'},
              {name: 'CO', index: 4, text: ' CO'},
              {name: 'NO2', index: 5, text: 'NO2'},
              {name: 'SO2', index: 6, text: 'SO2'},
              {name: '等级', index: 7, text: '等级'}
            ];

            var lineStyle = {
              normal: {
                width: 1,
                opacity: 0.5
              }
            };

            const optionData = {
              backgroundColor: '#333',
              legend: {
                bottom: 30,
                data: ['北京', '上海', '广州'],
                itemGap: 20,
                textStyle: {
                  color: '#fff',
                  fontSize: 14
                }
              },
              tooltip: {
                padding: 10,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                  var value = obj[0].value;
                  return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                    + obj[0].seriesName + ' ' + value[0] + '日期：'
                    + value[7]
                    + '</div>'
                    + schema[1].text + '：' + value[1] + '<br>'
                    + schema[2].text + '：' + value[2] + '<br>'
                    + schema[3].text + '：' + value[3] + '<br>'
                    + schema[4].text + '：' + value[4] + '<br>'
                    + schema[5].text + '：' + value[5] + '<br>'
                    + schema[6].text + '：' + value[6] + '<br>';
                }
              },
              // dataZoom: {
              //     show: true,
              //     orient: 'vertical',
              //     parallelAxisIndex: [0]
              // },
              parallelAxis: [
                {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
                {dim: 1, name: schema[1].text},
                {dim: 2, name: schema[2].text},
                {dim: 3, name: schema[3].text},
                {dim: 4, name: schema[4].text},
                {dim: 5, name: schema[5].text},
                {dim: 6, name: schema[6].text},
                {dim: 7, name: schema[7].text,
                  type: 'category', data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}
              ],
              visualMap: {
                show: true,
                min: 0,
                max: 150,
                dimension: 2,
                inRange: {
                  color: ['#d94e5d','#eac736','#50a3ba'].reverse(),
                  // colorAlpha: [0, 1]
                }
              },
              parallel: {
                left: '5%',
                right: '18%',
                bottom: 100,
                parallelAxisDefault: {
                  type: 'value',
                  name: 'AQI指数',
                  nameLocation: 'end',
                  nameGap: 20,
                  nameTextStyle: {
                    color: '#fff',
                    fontSize: 12
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#aaa'
                    }
                  },
                  axisTick: {
                    lineStyle: {
                      color: '#777'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#fff'
                    }
                  }
                }
              },
              series: [
                {
                  name: '北京',
                  type: 'parallel',
                  lineStyle: lineStyle,
                  data: dataBJ
                },
                {
                  name: '上海',
                  type: 'parallel',
                  lineStyle: lineStyle,
                  data: dataSH
                },
                {
                  name: '广州',
                  type: 'parallel',
                  lineStyle: lineStyle,
                  data: dataGZ
                }
              ]
            };

            this.chart.setOption(optionData);
          },


          //les miserable
          les: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            var data = [{
              name: 'Grandpa',
              children: [{
                name: 'Uncle Leo',
                value: 15,
                children: [{
                  name: 'Cousin Jack',
                  value: 2
                }, {
                  name: 'Cousin Mary',
                  value: 5,
                  children: [{
                    name: 'Jackson',
                    value: 2
                  }]
                }, {
                  name: 'Cousin Ben',
                  value: 4
                }]
              }, {
                name: 'Aunt Jane',
                children: [{
                  name: 'Cousin Kate',
                  value: 4
                }]
              }, {
                name: 'Father',
                value: 10,
                children: [{
                  name: 'Me',
                  value: 5,
                  itemStyle: {
                    color: 'red'
                  }
                }, {
                  name: 'Brother Peter',
                  value: 1
                }]
              }]
            }, {
              name: 'Mike',
              children: [{
                name: 'Uncle Dan',
                children: [{
                  name: 'Cousin Lucy',
                  value: 3
                }, {
                  name: 'Cousin Luck',
                  value: 4,
                  children: [{
                    name: 'Nephew',
                    value: 2
                  }]
                }]
              }]
            }, {
              name: 'Nancy',
              children: [{
                name: 'Uncle Nike',
                children: [{
                  name: 'Cousin Betty',
                  value: 1
                }, {
                  name: 'Cousin Jenny',
                  value: 2
                }]
              }]
            }];

            const optionData = {
              visualMap: {
                type: 'continuous',
                min: 0,
                max: 10,
                inRange: {
                  color: ['#2D5F73', '#538EA6', '#F2D1B3', '#F2B8A2', '#F28C8C']
                }
              },
              series: {
                type: 'sunburst',
                data: data,
                radius: [0, '90%'],
                label: {
                  rotate: 'radial'
                }
              }
            };

            this.chart.setOption(optionData);


          },

          //盒须图
          multiple: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            app.title = '笛卡尔坐标系上的热力图';

            var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
              '7a', '8a', '9a','10a','11a',
              '12p', '1p', '2p', '3p', '4p', '5p',
              '6p', '7p', '8p', '9p', '10p', '11p'];
            var days = ['Saturday', 'Friday', 'Thursday',
              'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

            var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];

            data = data.map(function (item) {
              return [item[1], item[0], item[2] || '-'];
            });

            const optionData = {
              tooltip: {
                position: 'top'
              },
              animation: false,
              grid: {
                height: '50%',
                y: '10%'
              },
              xAxis: {
                type: 'category',
                data: hours,
                splitArea: {
                  show: true
                }
              },
              yAxis: {
                type: 'category',
                data: days,
                splitArea: {
                  show: true
                }
              },
              visualMap: {
                min: 0,
                max: 10,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '15%'
              },
              series: [{
                name: 'Punch Card',
                type: 'heatmap',
                data: data,
                label: {
                  normal: {
                    show: true
                  }
                },
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            };


            this.chart.setOption(optionData);
          },

          //地图
          linesBus: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            var rawData = [["2015/1/5","3258.63","3350.52","115.84","3.58%","3253.88","3369.28","531352384","54976008","-"],["2015/1/6","3330.8","3351.45","0.93","0.03%","3303.18","3394.22","501661696","53239848","-"],["2015/1/7","3326.65","3373.95","22.51","0.67%","3312.21","3374.9","391918880","43641672","-"],["2015/1/8","3371.96","3293.46","-80.5","-2.39%","3285.09","3381.57","371131200","39923032","-"],["2015/1/9","3276.97","3285.41","-8.04","-0.24%","3267.51","3404.83","410240864","45864804","-"],["2015/1/12","3258.21","3229.32","-56.1","-1.71%","3191.58","3275.19","322064672","36627308","-"],["2015/1/13","3223.54","3235.3","5.98","0.19%","3214.41","3259.39","230725760","27358878","-"],["2015/1/14","3242.34","3222.44","-12.86","-0.40%","3193.98","3268.48","240190752","26720452","-"],["2015/1/15","3224.07","3336.46","114.02","3.54%","3207.54","3337.08","282546240","33061054","-"],["2015/1/16","3343.6","3376.5","40.04","1.20%","3340.49","3400.32","339876768","39225388","-"],["2015/1/19","3189.73","3116.35","-260.14","-7.70%","3095.07","3262.21","401098784","40988600","-"],["2015/1/20","3114.56","3173.05","56.7","1.82%","3100.48","3190.25","357080800","41629524","-"],["2015/1/21","3189.08","3323.61","150.56","4.74%","3178.34","3337","410956032","47375868","-"],["2015/1/22","3327.32","3343.34","19.73","0.59%","3293.98","3352.38","353382976","40787408","-"],["2015/1/23","3357.1","3351.76","8.42","0.25%","3328.29","3406.79","366249248","42097952","-"],["2015/1/26","3347.26","3383.18","31.42","0.94%","3321.31","3384.8","317540992","35842744","-"],["2015/1/27","3389.85","3352.96","-30.22","-0.89%","3290.22","3390.22","374517568","41829884","-"],["2015/1/28","3325.72","3305.74","-47.22","-1.41%","3294.66","3354.8","301927104","34156428","-"],["2015/1/29","3259","3262.3","-43.43","-1.31%","3234.24","3286.79","274658624","29642450","-"],["2015/1/30","3273.75","3210.36","-51.94","-1.59%","3210.31","3288.5","258312544","28426564","-"],["2015/2/2","3148.14","3128.3","-82.06","-2.56%","3122.57","3175.13","250861632","26684996","-"],["2015/2/3","3156.09","3204.91","76.61","2.45%","3129.73","3207.94","248192160","28335594","-"],["2015/2/4","3212.82","3174.13","-30.78","-0.96%","3171.14","3238.98","249098080","29015516","-"],["2015/2/5","3251.21","3136.53","-37.6","-1.18%","3135.82","3251.21","306139296","34826696","-"],["2015/2/6","3120.09","3075.91","-60.62","-1.93%","3052.94","3129.54","246749680","26650278","-"],["2015/2/9","3063.51","3095.12","19.22","0.62%","3049.11","3119.03","206108384","24071968","-"],["2015/2/10","3090.49","3141.59","46.47","1.50%","3084.25","3142.1","193817136","22508492","-"],["2015/2/11","3145.76","3157.7","16.11","0.51%","3139.05","3166.42","172840096","21086256","-"],["2015/2/12","3157.96","3173.42","15.71","0.50%","3134.24","3181.77","194592320","22969158","-"],["2015/2/13","3186.81","3203.83","30.41","0.96%","3182.79","3237.16","261290432","29301768","-"],["2015/2/16","3206.14","3222.36","18.54","0.58%","3195.88","3228.85","223797440","26595070","-"],["2015/2/17","3230.88","3246.91","24.54","0.76%","3230.77","3255.73","228332624","26334004","-"],["2015/2/25","3256.48","3228.84","-18.06","-0.56%","3215.55","3257.22","233348096","26514336","-"],["2015/2/26","3222.15","3298.36","69.52","2.15%","3202.19","3300.62","301263872","33434746","-"],["2015/2/27","3296.83","3310.3","11.94","0.36%","3291.01","3324.55","299163712","33501958","-"],["2015/3/2","3332.72","3336.28","25.98","0.78%","3298.67","3336.76","346445664","41025956","-"],["2015/3/3","3317.7","3263.05","-73.23","-2.20%","3260.43","3317.7","382044608","44159348","-"],["2015/3/4","3264.18","3279.53","16.48","0.51%","3250.48","3286.59","293639520","34678976","-"],["2015/3/5","3264.08","3248.48","-31.06","-0.95%","3221.67","3266.64","320663584","37358000","-"],["2015/3/6","3248.04","3241.19","-7.29","-0.22%","3234.53","3266.93","282915808","32834414","-"],["2015/3/9","3224.31","3302.41","61.22","1.89%","3198.37","3307.7","321495456","35992752","-"],["2015/3/10","3289.08","3286.07","-16.34","-0.49%","3277.09","3309.92","285817568","32995596","-"],["2015/3/11","3289.59","3290.9","4.83","0.15%","3278.47","3325.05","282985536","32757308","-"],["2015/3/12","3314.81","3349.32","58.42","1.78%","3300.49","3360.05","357295104","40719240","-"],["2015/3/13","3359.49","3372.91","23.59","0.70%","3352.15","3391.25","328410144","37404140","-"],["2015/3/16","3391.16","3449.3","76.39","2.26%","3377.09","3449.3","399132416","47935532","-"],["2015/3/17","3469.6","3502.85","53.54","1.55%","3459.69","3504.12","520939520","60150068","-"],["2015/3/18","3510.5","3577.3","74.45","2.13%","3503.85","3577.66","545217152","61736700","-"],["2015/3/19","3576.02","3582.27","4.97","0.14%","3546.84","3600.68","537346624","61224968","-"],["2015/3/20","3587.08","3617.32","35.05","0.98%","3569.38","3632.34","516661664","65177196","-"],["2015/3/23","3640.1","3687.73","70.41","1.95%","3635.49","3688.25","536062816","66157464","-"],["2015/3/24","3692.57","3691.41","3.68","0.10%","3600.7","3715.87","639554688","75488472","-"],["2015/3/25","3680.95","3660.73","-30.68","-0.83%","3634.56","3693.15","521886336","64549892","-"],["2015/3/26","3641.94","3682.09","21.37","0.58%","3615.01","3707.32","488647200","61951560","-"],["2015/3/27","3686.13","3691.1","9","0.24%","3656.83","3710.48","408945184","50929848","-"],["2015/3/30","3710.61","3786.57","95.47","2.59%","3710.61","3795.94","564702400","69212536","-"],["2015/3/31","3822.99","3747.9","-38.67","-1.02%","3737.04","3835.57","561676032","72129488","-"],["2015/4/1","3748.34","3810.29","62.4","1.66%","3742.21","3817.08","447458304","59241832","-"],["2015/4/2","3827.69","3825.78","15.49","0.41%","3775.89","3835.45","479299680","63202892","-"],["2015/4/3","3803.38","3863.93","38.14","1.00%","3792.21","3864.41","473033312","63565136","-"]];
            var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
            var labelFont = 'bold 12px Sans-serif';

            function calculateMA(dayCount, data) {
              var result = [];
              for (var i = 0, len = data.length; i < len; i++) {
                if (i < dayCount) {
                  result.push('-');
                  continue;
                }
                var sum = 0;
                for (var j = 0; j < dayCount; j++) {
                  sum += data[i - j][1];
                }
                result.push((sum / dayCount).toFixed(2));
              }
              return result;
            }


            var dates = ["2016-03-29", "2016-03-30", "2016-03-31", "2016-04-01", "2016-04-04", "2016-04-05", "2016-04-06", "2016-04-07", "2016-04-08", "2016-04-11", "2016-04-12", "2016-04-13", "2016-04-14", "2016-04-15", "2016-04-18", "2016-04-19", "2016-04-20", "2016-04-21", "2016-04-22", "2016-04-25", "2016-04-26", "2016-04-27", "2016-04-28", "2016-04-29", "2016-05-02", "2016-05-03", "2016-05-04", "2016-05-05", "2016-05-06", "2016-05-09", "2016-05-10", "2016-05-11", "2016-05-12", "2016-05-13", "2016-05-16", "2016-05-17", "2016-05-18", "2016-05-19", "2016-05-20", "2016-05-23", "2016-05-24", "2016-05-25", "2016-05-26", "2016-05-27", "2016-05-31", "2016-06-01", "2016-06-02", "2016-06-03", "2016-06-06", "2016-06-07", "2016-06-08", "2016-06-09", "2016-06-10", "2016-06-13", "2016-06-14", "2016-06-15", "2016-06-16", "2016-06-17", "2016-06-20", "2016-06-21", "2016-06-22"];
            var data = [[17512.58,17633.11,17434.27,17642.81,86160000],[17652.36,17716.66,17652.36,17790.11,79330000],[17716.05,17685.09,17669.72,17755.7,102600000],[17661.74,17792.75,17568.02,17811.48,104890000],[17799.39,17737,17710.67,17806.38,85230000],[17718.03,17603.32,17579.56,17718.03,115230000],[17605.45,17716.05,17542.54,17723.55,99410000],[17687.28,17541.96,17484.23,17687.28,90120000],[17555.39,17576.96,17528.16,17694.51,79990000],[17586.48,17556.41,17555.9,17731.63,107100000],[17571.34,17721.25,17553.57,17744.43,81020000],[17741.66,17908.28,17741.66,17918.35,91710000],[17912.25,17926.43,17885.44,17962.14,84510000],[17925.95,17897.46,17867.41,17937.65,118160000],[17890.2,18004.16,17848.22,18009.53,89390000],[18012.1,18053.6,17984.43,18103.46,89820000],[18059.49,18096.27,18031.21,18167.63,100210000],[18092.84,17982.52,17963.89,18107.29,102720000],[17985.05,18003.75,17909.89,18026.85,134120000],[17990.94,17977.24,17855.55,17990.94,83770000],[17987.38,17990.32,17934.17,18043.77,92570000],[17996.14,18041.55,17920.26,18084.66,109090000],[18023.88,17830.76,17796.55,18035.73,100920000],[17813.09,17773.64,17651.98,17814.83,136670000],[17783.78,17891.16,17773.71,17912.35,80100000],[17870.75,17750.91,17670.88,17870.75,97060000],[17735.02,17651.26,17609.01,17738.06,95020000],[17664.48,17660.71,17615.82,17736.11,81530000],[17650.3,17740.63,17580.38,17744.54,80020000],[17743.85,17705.91,17668.38,17783.16,85590000],[17726.66,17928.35,17726.66,17934.61,75790000],[17919.03,17711.12,17711.05,17919.03,87390000],[17711.12,17720.5,17625.38,17798.19,88560000],[17711.12,17535.32,17512.48,17734.74,86640000],[17531.76,17710.71,17531.76,17755.8,88440000],[17701.46,17529.98,17469.92,17701.46,103260000],[17501.28,17526.62,17418.21,17636.22,79120000],[17514.16,17435.4,17331.07,17514.16,95530000],[17437.32,17500.94,17437.32,17571.75,111990000],[17507.04,17492.93,17480.05,17550.7,87790000],[17525.19,17706.05,17525.19,17742.59,86480000],[17735.09,17851.51,17735.09,17891.71,79180000],[17859.52,17828.29,17803.82,17888.66,68940000],[17826.85,17873.22,17824.73,17873.22,73190000],[17891.5,17787.2,17724.03,17899.24,147390000],[17754.55,17789.67,17664.79,17809.18,78530000],[17789.05,17838.56,17703.55,17838.56,75560000],[17799.8,17807.06,17689.68,17833.17,82270000],[17825.69,17920.33,17822.81,17949.68,71870000],[17936.22,17938.28,17936.22,18003.23,78750000],[17931.91,18005.05,17931.91,18016,71260000],[17969.98,17985.19,17915.88,18005.22,69690000],[17938.82,17865.34,17812.34,17938.82,90540000],[17830.5,17732.48,17731.35,17893.28,101690000],[17710.77,17674.82,17595.79,17733.92,93740000],[17703.65,17640.17,17629.01,17762.96,94130000],[17602.23,17733.1,17471.29,17754.91,91950000],[17733.44,17675.16,17602.78,17733.44,248680000],[17736.87,17804.87,17736.87,17946.36,99380000],[17827.33,17829.73,17799.8,17877.84,85130000],[17832.67,17780.83,17770.36,17920.16,89440000]];
            var volumes = [86160000,79330000,102600000,104890000,85230000,115230000,99410000,90120000,79990000,107100000,81020000,91710000,84510000,118160000,89390000,89820000,100210000,102720000,134120000,83770000,92570000,109090000,100920000,136670000,80100000,97060000,95020000,81530000,80020000,85590000,75790000,87390000,88560000,86640000,88440000,103260000,79120000,95530000,111990000,87790000,86480000,79180000,68940000,73190000,147390000,78530000,75560000,82270000,71870000,78750000,71260000,69690000,90540000,101690000,93740000,94130000,91950000,248680000,99380000,85130000,89440000];

            var dataMA5 = calculateMA(5, data);
            var dataMA10 = calculateMA(10, data);
            var dataMA20 = calculateMA(20, data);


            const optionData = {
              animation: false,
              color: colorList,
              title: {
                left: 'center',
                text: '移动端 K线图'
              },
              legend: {
                top: 30,
                data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
              },
              tooltip: {
                triggerOn: 'none',
                transitionDuration: 0,
                confine: true,
                bordeRadius: 4,
                borderWidth: 1,
                borderColor: '#333',
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: {
                  fontSize: 12,
                  color: '#333'
                },
                position: function (pos, params, el, elRect, size) {
                  var obj = {
                    top: 60
                  };
                  obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                  return obj;
                }
              },
              axisPointer: {
                link: [{
                  xAxisIndex: [0, 1]
                }]
              },
              dataZoom: [{
                type: 'slider',
                xAxisIndex: [0, 1],
                realtime: false,
                start: 20,
                end: 70,
                top: 65,
                height: 20,
                handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '120%'
              }, {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 40,
                end: 70,
                top: 30,
                height: 20
              }],
              xAxis: [{
                type: 'category',
                data: dates,
                boundaryGap : false,
                axisLine: { lineStyle: { color: '#777' } },
                axisLabel: {
                  formatter: function (value) {
                    return echarts.format.formatTime('MM-dd', value);
                  }
                },
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                  show: true
                }
              }, {
                type: 'category',
                gridIndex: 1,
                data: dates,
                scale: true,
                boundaryGap : false,
                splitLine: {show: false},
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: { lineStyle: { color: '#777' } },
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                  type: 'shadow',
                  label: {show: false},
                  triggerTooltip: true,
                  handle: {
                    show: true,
                    margin: 30,
                    color: '#B80C00'
                  }
                }
              }],
              yAxis: [{
                scale: true,
                splitNumber: 2,
                axisLine: { lineStyle: { color: '#777' } },
                splitLine: { show: true },
                axisTick: { show: false },
                axisLabel: {
                  inside: true,
                  formatter: '{value}\n'
                }
              }, {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
              }],
              grid: [{
                left: 20,
                right: 20,
                top: 110,
                height: 120
              }, {
                left: 20,
                right: 20,
                height: 40,
                top: 260
              }],
              graphic: [{
                type: 'group',
                left: 'center',
                top: 70,
                width: 300,
                bounding: 'raw',
                children: [{
                  id: 'MA5',
                  type: 'text',
                  style: {fill: colorList[1], font: labelFont},
                  left: 0
                }, {
                  id: 'MA10',
                  type: 'text',
                  style: {fill: colorList[2], font: labelFont},
                  left: 'center'
                }, {
                  id: 'MA20',
                  type: 'text',
                  style: {fill: colorList[3], font: labelFont},
                  right: 0
                }]
              }],
              series: [{
                name: 'Volume',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    color: '#7fbe9e'
                  },
                  emphasis: {
                    color: '#140'
                  }
                },
                data: volumes
              }, {
                type: 'candlestick',
                name: '日K',
                data: data,
                itemStyle: {
                  normal: {
                    color: '#ef232a',
                    color0: '#14b143',
                    borderColor: '#ef232a',
                    borderColor0: '#14b143'
                  },
                  emphasis: {
                    color: 'black',
                    color0: '#444',
                    borderColor: 'black',
                    borderColor0: '#444'
                  }
                }
              }, {
                name: 'MA5',
                type: 'line',
                data: dataMA5,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                  normal: {
                    width: 1
                  }
                }
              }, {
                name: 'MA10',
                type: 'line',
                data: dataMA10,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                  normal: {
                    width: 1
                  }
                }
              }, {
                name: 'MA20',
                type: 'line',
                data: dataMA20,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                  normal: {
                    width: 1
                  }
                }
              }]
            };
            this.chart.setOption(optionData);

          },





          //share Dataset
          shareData: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              title: {
                text: '折线图'
              },
              legend: {},
              tooltip: {
                trigger: 'axis',
                showContent: false
              },
              dataset: {
                source: [
                  ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                  ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                  ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                  ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                  ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                ]
              },
              xAxis: {type: 'category'},
              yAxis: {gridIndex: 0},
              grid: {top: '55%'},
              series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                  type: 'pie',
                  id: 'pie',
                  radius: '30%',
                  center: ['50%', '25%'],
                  label: {
                    formatter: '{b}: {@2012} ({d}%)'
                  },
                  encode: {
                    itemName: 'product',
                    value: '2012',
                    tooltip: '2012'
                  }
                }
              ]
            };

            this.chart.on('updateAxisPointer', function (event) {
              var xAxisInfo = event.axesInfo[0];
              if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                this.chart.setOption({
                  series: {
                    id: 'pie',
                    label: {
                      formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                      value: dimension,
                      tooltip: dimension
                    }
                  }
                });
              }
            });

            this.chart.setOption(optionData);
          },


          // 柱状图动画延迟
          bar1: function (id){
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            var xAxisData = [];
            var data1 = [];
            var data2 = [];
            for (var i = 0; i < 200; i++) {
              xAxisData.push('类目' + i);
              data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
              data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
            }

            const optionData = {
              title: {
                text: '柱状图动画延迟'
              },
              legend: {
                data: ['bar', 'bar2'],
                align: 'left'
              },
              toolbox: {
                // y: 'bottom',
                feature: {
                  magicType: {
                    type: ['stack', 'tiled']
                  },
                  dataView: {},
                  saveAsImage: {
                    pixelRatio: 2
                  }
                }
              },
              tooltip: {},
              xAxis: {
                data: xAxisData,
                silent: false,
                splitLine: {
                  show: false
                }
              },
              yAxis: {
              },
              series: [{
                name: 'bar',
                type: 'bar',
                data: data1,
                animationDelay: function (idx) {
                  return idx * 10;
                }
              }, {
                name: 'bar2',
                type: 'bar',
                data: data2,
                animationDelay: function (idx) {
                  return idx * 10 + 100;
                }
              }],
              animationEasing: 'elasticOut',
              animationDelayUpdate: function (idx) {
                return idx * 5;
              }
            };
            this.chart.setOption(optionData);
          },

          // demo-aqi1

          aqi1 : function(id){
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            // Schema:
            // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
            var dataBJ = [
              [55,9,56,0.46,18,6,1],
              [25,11,21,0.65,34,9,2],
              [56,7,63,0.3,14,5,3],
              [33,7,29,0.33,16,6,4],
              [42,24,44,0.76,40,16,5],
              [82,58,90,1.77,68,33,6],
              [74,49,77,1.46,48,27,7],
              [78,55,80,1.29,59,29,8],
              [267,216,280,4.8,108,64,9],
              [185,127,216,2.52,61,27,10],
              [39,19,38,0.57,31,15,11],
              [41,11,40,0.43,21,7,12],
              [64,38,74,1.04,46,22,13],
              [108,79,120,1.7,75,41,14],
              [108,63,116,1.48,44,26,15],
              [33,6,29,0.34,13,5,16],
              [94,66,110,1.54,62,31,17],
              [186,142,192,3.88,93,79,18],
              [57,31,54,0.96,32,14,19],
              [22,8,17,0.48,23,10,20],
              [39,15,36,0.61,29,13,21],
              [94,69,114,2.08,73,39,22],
              [99,73,110,2.43,76,48,23],
              [31,12,30,0.5,32,16,24],
              [42,27,43,1,53,22,25],
              [154,117,157,3.05,92,58,26],
              [234,185,230,4.09,123,69,27],
              [160,120,186,2.77,91,50,28],
              [134,96,165,2.76,83,41,29],
              [52,24,60,1.03,50,21,30],
              [46,5,49,0.28,10,6,31]
            ];

            var dataGZ = [
              [26,37,27,1.163,27,13,1],
              [85,62,71,1.195,60,8,2],
              [78,38,74,1.363,37,7,3],
              [21,21,36,0.634,40,9,4],
              [41,42,46,0.915,81,13,5],
              [56,52,69,1.067,92,16,6],
              [64,30,28,0.924,51,2,7],
              [55,48,74,1.236,75,26,8],
              [76,85,113,1.237,114,27,9],
              [91,81,104,1.041,56,40,10],
              [84,39,60,0.964,25,11,11],
              [64,51,101,0.862,58,23,12],
              [70,69,120,1.198,65,36,13],
              [77,105,178,2.549,64,16,14],
              [109,68,87,0.996,74,29,15],
              [73,68,97,0.905,51,34,16],
              [54,27,47,0.592,53,12,17],
              [51,61,97,0.811,65,19,18],
              [91,71,121,1.374,43,18,19],
              [73,102,182,2.787,44,19,20],
              [73,50,76,0.717,31,20,21],
              [84,94,140,2.238,68,18,22],
              [93,77,104,1.165,53,7,23],
              [99,130,227,3.97,55,15,24],
              [146,84,139,1.094,40,17,25],
              [113,108,137,1.481,48,15,26],
              [81,48,62,1.619,26,3,27],
              [56,48,68,1.336,37,9,28],
              [82,92,174,3.29,0,13,29],
              [106,116,188,3.628,101,16,30],
              [118,50,0,1.383,76,11,31]
            ];

            var dataSH = [
              [91,45,125,0.82,34,23,1],
              [65,27,78,0.86,45,29,2],
              [83,60,84,1.09,73,27,3],
              [109,81,121,1.28,68,51,4],
              [106,77,114,1.07,55,51,5],
              [109,81,121,1.28,68,51,6],
              [106,77,114,1.07,55,51,7],
              [89,65,78,0.86,51,26,8],
              [53,33,47,0.64,50,17,9],
              [80,55,80,1.01,75,24,10],
              [117,81,124,1.03,45,24,11],
              [99,71,142,1.1,62,42,12],
              [95,69,130,1.28,74,50,13],
              [116,87,131,1.47,84,40,14],
              [108,80,121,1.3,85,37,15],
              [134,83,167,1.16,57,43,16],
              [79,43,107,1.05,59,37,17],
              [71,46,89,0.86,64,25,18],
              [97,71,113,1.17,88,31,19],
              [84,57,91,0.85,55,31,20],
              [87,63,101,0.9,56,41,21],
              [104,77,119,1.09,73,48,22],
              [87,62,100,1,72,28,23],
              [168,128,172,1.49,97,56,24],
              [65,45,51,0.74,39,17,25],
              [39,24,38,0.61,47,17,26],
              [39,24,39,0.59,50,19,27],
              [93,68,96,1.05,79,29,28],
              [188,143,197,1.66,99,51,29],
              [174,131,174,1.55,108,50,30],
              [187,143,201,1.39,89,53,31]
            ];

            var lineStyle = {
              normal: {
                width: 1,
                opacity: 0.5
              }
            };

            const optionData = {
              backgroundColor: '#161627',
              title: {
                text: 'AQI - 雷达图',
                left: 'center',
                textStyle: {
                  color: '#eee'
                }
              },
              legend: {
                bottom: 5,
                data: ['北京', '上海', '广州'],
                itemGap: 20,
                textStyle: {
                  color: '#fff',
                  fontSize: 14
                },
                selectedMode: 'single'
              },
              // visualMap: {
              //     show: true,
              //     min: 0,
              //     max: 20,
              //     dimension: 6,
              //     inRange: {
              //         colorLightness: [0.5, 0.8]
              //     }
              // },
              radar: {
                indicator: [
                  {name: 'AQI', max: 300},
                  {name: 'PM2.5', max: 250},
                  {name: 'PM10', max: 300},
                  {name: 'CO', max: 5},
                  {name: 'NO2', max: 200},
                  {name: 'SO2', max: 100}
                ],
                shape: 'circle',
                splitNumber: 5,
                name: {
                  textStyle: {
                    color: 'rgb(238, 197, 102)'
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: [
                      'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                      'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                      'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                    ].reverse()
                  }
                },
                splitArea: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: 'rgba(238, 197, 102, 0.5)'
                  }
                }
              },
              series: [
                {
                  name: '北京',
                  type: 'radar',
                  lineStyle: lineStyle,
                  data: dataBJ,
                  symbol: 'none',
                  itemStyle: {
                    normal: {
                      color: '#F9713C'
                    }
                  },
                  areaStyle: {
                    normal: {
                      opacity: 0.1
                    }
                  }
                },
                {
                  name: '上海',
                  type: 'radar',
                  lineStyle: lineStyle,
                  data: dataSH,
                  symbol: 'none',
                  itemStyle: {
                    normal: {
                      color: '#B3E4A1'
                    }
                  },
                  areaStyle: {
                    normal: {
                      opacity: 0.05
                    }
                  }
                },
                {
                  name: '广州',
                  type: 'radar',
                  lineStyle: lineStyle,
                  data: dataGZ,
                  symbol: 'none',
                  itemStyle: {
                    normal: {
                      color: 'rgb(238, 197, 102)'
                    }
                  },
                  areaStyle: {
                    normal: {
                      opacity: 0.05
                    }
                  }
                }
              ]
            };


            this.chart.setOption(optionData);
          }

        }
      }
    }
  })
}

export default {
  install
}
